<template>
  <div class="buy">
    <div class="buy_top">
      <image class="buy_top_img" resize="cover" :src="img"></image>
    </div>
    <div class="buy_title">
      <text class="buy_title_text buy_title_left">年度VIP会员卡</text>
      <text class="buy_title_text buy_title_right">(实物卡)</text>
    </div>
    <div class="buy_info">
      <text class="buy_info_text">为了感谢广大会员的支持，【成功密码】VIP会员礼品卡的买赠活动，延续到4月1日【成功密码】迭代升级为止。请会员们加紧订购，赠送给亲朋好友。</text>
    </div>
    <div class="buy_choice">
      <div class="buy_opt" @click="optOne">
        <!-- <input type="radio" name="cardChoose" id="card1" class="buy_opt_radio" value="0" checked=""> -->
        <text class="buy_opt_icon buy_opt_iconLeft" v-if="opt1!=opt"></text>
        <div class="buy_opt_iconDiv buy_opt_iconLeft" v-if="opt1==opt">
          <text class="buy_opt_iconText"></text>
        </div>
        <text class="buy_opt_iconRight">￥990  买10张，获赠10张</text>
      </div>
      <div class="buy_opt" @click="optTwo">
        <!-- <input type="radio" name="cardChoose" id="card1" class="buy_opt_radio" value="1"> -->
        <text class="buy_opt_icon buy_opt_iconLeft" v-if="opt2!=opt"></text>
        <div class="buy_opt_iconDiv buy_opt_iconLeft" v-if="opt2==opt">
          <text class="buy_opt_iconText"></text>
        </div>
        <text class="buy_opt_iconRight">￥4950  买50张，获赠60张</text>
      </div>
      <div class="buy_opt" @click="optThree">
        <!-- <input type="radio" name="cardChoose" id="card1" class="buy_opt_radio" value="2"> -->
        <text class="buy_opt_icon buy_opt_iconLeft" v-if="opt3!=opt"></text>
        <div class="buy_opt_iconDiv buy_opt_iconLeft" v-if="opt3==opt">
          <text class="buy_opt_iconText"></text>
        </div>
        <text class="buy_opt_iconRight">￥9900  买100张，获赠140张</text>
      </div>
    </div>
    <div class="buy_btn">
      <text class="buy_btn_text">确 认</text>
    </div>
  </div>
</template>
<style scoped>
  .buy_top{}
  .buy_top_img{width: 750px;height: 473px;}
  .buy_title{flex-direction: row;align-items: flex-end;justify-content: center;}
  .buy_title_text{color: #E61211;margin: 40px 0 20px 0;}
  .buy_title_left{font-weight: bold;font-size: 40px;}
  .buy_title_right{font-size: 38px;}
  .buy_info{width: 675px;margin: 0 37.5px;}
  .buy_info_text{color: #727171;font-size: 28px;line-height: 45px;}
  .buy_opt{flex-direction: row;align-items: center;justify-content: flex-start;margin-top: 40px;margin-left: 70px;}
  .buy_opt_icon{border-width: 2px;border-style: solid;border-color: #c0c0c0;width: 50px;height: 50px;border-radius: 25px;margin-right: 20px;}
  .buy_opt_icon_choose{border-color: #E61211;}
  .buy_opt_iconDiv{position: relative;border-width: 2px;border-style: solid;border-color: #E61211;width: 50px;height: 50px;border-radius: 25px;margin-right: 20px;}
  .buy_opt_iconText{position: absolute;width: 18px;height: 18px;background-color: #E61211;border-radius: 9px;margin-left: 14px;margin-top: 14px;}
  .buy_opt_iconLeft{}
  .buy_opt_iconRight{font-size: 36px;}
  .buy_btn{align-items: center;justify-content: center;width: 450px;height: 94px;background-color: #E61211;border-radius: 10px;margin:100px 150px 0;}
  .buy_btn_text{color: #fff;}
</style>
<script>
  module.exports = {
    beforeCreate: function () {
      var domModule = weex.requireModule("dom");
      domModule.addRule('fontFace', {
        'fontFamily': "iconfont2",
        'src': "url('http://at.alicdn.com/t/font_475407_agvgdhxied0zr529.ttf')"
      });
    }
  }
</script>
<script>
const modal = weex.requireModule('modal')
module.exports = {
  data () {
    return {
      img:'../src/assets/img/vipChannel.jpg',
      opt:1,
      opt1:1,
      opt2:2,
      opt3:3,
    }
  },
  methods: {
    optOne:function(){
      this.opt=1;
    },
    optTwo:function(){
      this.opt=2;
    },
    optThree:function(){
      this.opt=3;
    },
    
  }
}
</script>